<template>
  <div class="page-container">
	  <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabsClick">
	      <el-tab-pane label="优惠券列表" name="first"></el-tab-pane>
	      <el-tab-pane label="领取历史记录" name="second"></el-tab-pane>
	   </el-tabs> -->
    <el-form :inline="true" :model="search" size="small" ref="searchForm">
			<el-form-item label="优惠券名称:" >
				<el-input placeholder="请输入优惠券名称" v-model="search.couponName" @change="filterSubmit" clearable></el-input>
			</el-form-item>
			<el-form-item label="优惠券类型:" >
				<el-select v-model="search.couponType"   placeholder="请选择优惠券类型"  @change="filterSubmit" clearable>
				    <el-option
				      v-for="item in couponTypeOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				    />
				  </el-select>
			</el-form-item>
			<el-form-item label="发布状态:" >
				<el-select v-model="search.publishStatus"   placeholder="请选择发布状态"  @change="filterSubmit" clearable>
				    <el-option
				      v-for="item in publishStatusOptions"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				    />
				  </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="filterSubmit">查询</el-button>
				<el-button @click="reset(searchForm)">重置</el-button>
			</el-form-item>
		</el-form>
    <el-row>
			<el-button size="small" @click="addSpec" type="primary">添加优惠券</el-button>
		</el-row>
    <div class="table-list">
      <el-table :data="list" size="small" style="margin-top:10px;">
        <el-table-column prop="couponName" label="优惠卷名称" width="150">
        </el-table-column>
        <el-table-column prop="couponType" label="优惠卷类型" width="150">
        	<template  #default="scope">
				<template  v-for="item in couponTypeOptions" :key="item.id">
					<span v-if="item.value === scope.row.couponType " >{{item.label}}</span>
				</template>
        	</template>
        </el-table-column>
        <el-table-column prop="amount" label="优惠金额" width="80">
        </el-table-column>
        <el-table-column prop="publishStatus" label="发布状态" width="150">
        	<template  #default="scope">
				<el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0" :active-text="scope.row.publishStatus == 1 ? '已发布' : '未发布'" @change="changeStatus(scope.row)"></el-switch>
        	</template>
        </el-table-column>
        <el-table-column prop="num" label="数量" width="80">
        </el-table-column>
        <el-table-column prop="publishCount" label="发行数量" width="80">
        </el-table-column>
        
        <el-table-column label="使用时间" width="300">
        	<template  #default="scope">
        		<div v-if="scope.row.useTimeType == 0">
        			<span>{{scope.row.usePointDay}}天后使用</span>
        		</div>
        		<div  v-else-if="scope.row.useTimeType == 1">
        			<span>{{scope.row.startTime}}</span>
        			至
        			<span>{{scope.row.endTime}}</span>
        		</div>
        	</template>
        </el-table-column>
        <el-table-column label="领取时间" width="300">
        	<template  #default="scope">
        		
        		<div v-if="scope.row.receiveTimeType == 1">
        			<span >不限时</span>
        		</div>
        		<div  v-else-if="scope.row.receiveTimeType == 0">
        			<span>{{scope.row.enableStartTime}}</span>
        			至
        			<span>{{scope.row.enableEndTime}}</span>
        		</div>
        		
        		
        	</template>
        </el-table-column>
        <el-table-column prop="note" label="备注">
			</el-table-column>
        <el-table-column label="操作" fixed="right" width="180px">
          <template #default="scope">
            <el-button type="primary" link @click="editRow(scope.row)" size="small">编辑</el-button>
            <el-button type="primary" link @click="delRow(scope.row)" size="small">删除</el-button>
			<el-button type="primary" link @click="receiveCouponHistory(scope.row)" size="small">领取历史记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-block">
        <el-pagination
          v-model:currentPage="search.current"
          v-model:page-size="search.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="true"
          :disabled="false"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <coupon-detail v-model:dialogDrawer="dialogFormVisible" :title="title" :default-form="form" @onDetailSubmit="detailSubmit" :couponTypeOptions="couponTypeOptions"
	:useTypeOptions="useTypeOptions" :publishStatusOptions="publishStatusOptions" :preferentialWayOptions="preferentialWayOptions" :useTimeTypeOptions="useTimeTypeOptions" :receiveTimeTypeOptions="receiveTimeTypeOptions" :classify="classifyList"></coupon-detail>
	<coupon-history-detail v-model:dialogDrawer="drawerVisible" :defaultForm="rowForm"></coupon-history-detail>
  
  </div>
</template>

<script>
import { reactive, toRefs, ref,onMounted } from 'vue'
import  { ElMessage, ElMessageBox } from 'element-plus'
import { changeDetSelect } from '/@/utils/utils'
import CouponDetail from '../components/CouponDetail.vue'
import CouponHistoryDetail from '../components/CouponHistoryDetail.vue'
import { pageList,remove,get,updateStatus } from '/@/api/sms/coupon'
import {getCategoryTree} from  '/@/api/pms/category'
import api from '/@/api/commonApi'

export default {
    name: 'Coupon',
    components: {
      CouponDetail,
	  CouponHistoryDetail
    },
    setup() {
        const searchForm = ref()
        const state = reactive({
		  activeName:'first',
		  drawerVisible: false,
		  receiveCouponHistoryTitle:'',
		  rowForm:{},
          search: {
            couponName: '',
            publishStatus: '',
			couponType:'',
			current: 1,
			size: 10,
          },
          classifyList: [],
          dialogFormVisible: false,
          form: {},
          title: '新增规格',
          list: [],
          total: 100,
          current: 1,
          page: 10,
		  couponTypeOptions: [{
		  		value: 0,
		  		label: '全场赠券',
		  	},
		  	{
		  		value: 1,
		  		label: '会员赠券',
		  	},
		  	{
		  		value: 2,
		  		label: '购物赠券',
		  	},
		  	{
		  		value: 3,
		  		label: '注册赠券',
		  	},
		  	{
		  		value: 4,
		  		label: '商品卷',
		  	}
		  ],
		  useTypeOptions: [{
		  		value: 0,
		  		label: '全场通用',
		  	},
		  	{
		  		value: 1,
		  		label: '指定分类',
		  	},
		  	{
		  		value: 2,
		  		label: '指定商品',
		  	},
		  ],
		  publishStatusOptions: [{
		  		value: 1,
		  		label: '已发布',
		  	},
		  	{
		  		value: 0,
		  		label: '未发布',
		  	}
		  ],
		  preferentialWayOptions: [{
		  		value: 0,
		  		label: '金额',
		  	},
		  	{
		  		value: 1,
		  		label: '折扣',
		  	}
		  ],
		  useTimeTypeOptions: [{
		  		value: 0,
		  		label: '按天',
		  	},
		  	{
		  		value: 1,
		  		label: '按时间区间',
		  	}
		  ],
		  receiveTimeTypeOptions: [{
		  		value: 0,
		  		label: '限时领取',
		  	},
		  	{
		  		value: 1,
		  		label: '不限时',
		  	}
		  ]
        })
        const filterSubmit = () => {
			state.search.current = 1
			getList()
        }
        const addSpec = () => {
          inintForm()
          state.title = '新增优惠券'
          state.dialogFormVisible = true
        }
        const editRow = (row) => {
          inintForm()
          state.title = '编辑优惠券'
          state.dialogFormVisible = true
          get(row.id).then(res=>{
            state.form = res.data
          })
        }
        const inintForm = () => {
          state.form = {
           id: '',
           couponName: '',
           couponType: 0,
           publishStatus: 1,
           useType: 0,
           num: 1,
           amount: 0.00,
           perLimit: 1,
           minPoint: 0,
           note: '',
           publishCount: 1,
           enableStartTime: '',
           enableEndTime: '',
           startTime: '',
           endTime: '',
           preferentialWay: 0,
           usePointDay: 30,
           receiveTimeType: 1,
           useTimeType: 0,
		   smsCouponSpuRelations:[],
		   catalogId:null
          }
        }
        const delRow = (row) => {
          ElMessageBox.confirm(
            '是否确认删除名称为"' + row.couponName + '"的数据项？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          ).then(() => {
			  remove(row.id).then(res=>{
				  if(res.code == 0){
					  ElMessage({
					    type: 'success',
					    message: '删除成功',
					  })
					  getList()
				  }
			  })
          }).catch()
        }
        const getList = () => {
			api.workCoupon(state.search).then(res=>{
				state.list = res.data.records
				state.total =  res.data.total
			})
		}
        const reset = (formEl) => {
          state.search = {
           couponName: '',
           publishStatus: '',
           couponType:'',
           current: 1,
           size: 10,
          }
		  getList()
        }
        const handleSizeChange = (e) => {
			state.search.size = e
            getList()
        }
        const handleCurrentChange = e => {
            state.search.current = e
            getList()
        }
		const getClassifyTree = () => {
			getCategoryTree({isWork: "1"}).then(res =>{
				state.classifyList = res.data
			})
		}
		const detailSubmit =() =>{
			getList()
			state.dialogFormVisible = false
		}
		const changeStatus = row =>{
			updateStatus({
				id:row.id,
				publishStatus:row.publishStatus
			}).then(res=>{
				if(res.code == 0){
					ElMessage({
					  type: 'success',
					  message: '修改成功',
					})
				}
			})
		}
		const receiveCouponHistory = (row) => {
			state.drawerVisible = true
			state.rowForm = row
		}
		onMounted(() => {
		    getList()
			getClassifyTree()
		})
        return {
          ...toRefs(state),
          filterSubmit,
          addSpec,
          editRow,
          delRow,
          searchForm,
          reset,
          handleSizeChange,
          handleCurrentChange,
		  getClassifyTree,
		  detailSubmit,
		  changeStatus,
		  receiveCouponHistory
        }
    }
}
</script>

<style scoped lang="scss">
.table-list{
  background: var(--next-color-white);
  margin-top: 10px;
  :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
  }
}
</style>